<template>
  <view class="page">
    <view class="card profile">
      <view class="avatar lg">刘</view>
      <view>
        <text class="name">刘畅 主治医师</text>
        <text class="sub">呼吸内科 · 执业 8 年</text>
      </view>
    </view>

    <view class="card stats">
      <view class="stat"><text class="num">4.9</text><text class="label">评分</text></view>
      <view class="stat"><text class="num">128</text><text class="label">患者</text></view>
      <view class="stat"><text class="num">862</text><text class="label">处方</text></view>
    </view>

    <view class="card">
      <text class="mini-title">设置</text>
      <view class="list">
        <view class="item" @tap="toggle('msg')">
          <text>新消息提醒</text>
          <switch :checked="settings.msg" color="#2a7de1" />
        </view>
        <view class="item" @tap="toggle('vibrate')">
          <text>震动反馈</text>
          <switch :checked="settings.vibrate" color="#2a7de1" />
        </view>
        <view class="item" @tap="clearCache">
          <text>清理缓存</text>
          <text class="sub">已占用 23.4MB</text>
        </view>
      </view>
    </view>

    <view class="card">
      <button class="btn-primary" @tap="logout">退出登录</button>
    </view>
    <view class="toast" v-if="toast">{{ toast }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return { settings: { msg: true, vibrate: true }, toast: '' }
  },
  methods: {
    toggle(k) { this.settings[k] = !this.settings[k] },
    clearCache() { this.toastMsg('缓存已清理') },
    logout() { this.toastMsg('已退出登录（模拟）') },
    toastMsg(m) { this.toast = m; setTimeout(() => this.toast = '', 1500) }
  }
}
</script>

<style>
.page { padding: 12px; background: linear-gradient(180deg, #eef3fb, #f8fafc); min-height: 100vh }
.card { background:#fff; border: 2rpx solid #e6e8ee; border-radius: 28rpx; box-shadow: 0 16rpx 48rpx rgba(16,24,40,.08); padding: 20rpx; margin-bottom: 12rpx }
.profile { display:flex; gap: 16rpx; align-items:center }
.avatar.lg { width: 120rpx; height: 120rpx; border-radius: 9999rpx; background: linear-gradient(135deg,#cfe4ff,#a6c8ff); display:flex; align-items:center; justify-content:center; font-weight:700; color:#1c3f7b; font-size: 40rpx }
.name { font-weight:700; font-size: 32rpx; display:block }
.sub { color:#667085; font-size:22rpx; display:block; margin-top: 4rpx }
.stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap: 12rpx }
.stat { background:#f8fafc; border:2rpx solid #e6e8ee; border-radius: 20rpx; padding: 20rpx; text-align:center }
.num { font-weight:800; font-size: 40rpx; color:#1a1f36 }
.label { color:#667085; font-size: 22rpx }
.mini-title { font-size: 22rpx; color:#667085; margin-bottom: 10rpx; font-weight:600; display:block }
.list { display:grid; }
.item { display:flex; justify-content:space-between; align-items:center; padding: 18rpx 0; border-bottom: 2rpx solid #e6e8ee }
.item:last-child { border-bottom: 0 }
.btn-primary { width: 100%; padding: 16rpx 20rpx; border-radius: 16rpx; background: linear-gradient(180deg,#2a7de1,#1f63b5); color:#fff; font-weight:700 }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 120rpx; background: rgba(17,24,39,.9); color:#fff; padding: 10rpx 16rpx; border-radius: 12rpx; font-size: 24rpx }
</style>


